<template>
    <div id="box" :class="enter?'Background':'background'">
        <div :class="show?'login':'enter'">
            <el-form ref="loginRef" :model="login" label-width="80px" :rules="rules">
                <el-form-item label="用户名称" prop="name">
                    <el-input v-model="login.name"></el-input>
                </el-form-item>
                <el-form-item label="用户密码" prop="password">
                    <el-input v-model="login.password" show-password></el-input>
                </el-form-item>
                <div class="btn" v-if="btnShow">
                    <el-button type="primary" plain @click="apply">登录</el-button>
                    <el-button type="warning" plain @click="change">注册</el-button>
                </div>
                <div class="btn" v-else>
                    <el-button type="success" plain @click="back">确定</el-button>
                    <el-button type="danger" plain @click="backEnter">取消</el-button>
                </div>
            </el-form>
        </div>
        <!-- 确认框 -->
        <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%">
            <span>账号申请成功</span>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="backEnter">确 定</el-button>
                <el-button @click="backEnter">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import http from '@/util/http'
import { Message } from 'element-ui'
export default {
  data () {
    return {
      enter: false,
      show: false,
      btnShow: true,
      login: {
        name: '',
        password: ''
      },
      loginRef: '',
      dialogVisible: false,
      rules: {
        name: [
          { required: true, message: '请输入用户名称', trigger: 'blur' },
          { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入用户密码', trigger: 'blur' },
          { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    change () {
      this.enter = !this.enter
      this.show = !this.show
      this.btnShow = !this.btnShow
      this.login.name = ''
      this.login.password = ''
      this.$refs.loginRef.clearValidate()
    },
    back () {
      this.$refs.loginRef.validate(valed => {
        if (valed) {
          http.post('/api/login/apply', this.login).then(res => {
            if (res.data.code === 0) {
              Message.error('姓名已经被注册')
            } else if (res.data.code === 1) {
              this.dialogVisible = true
            }
          })
        } else {
          Message.error('账号申请失败')
          this.$refs.loginRef.clearValidate()
        }
      })
    },
    backEnter () {
      this.enter = !this.enter
      this.show = !this.show
      this.btnShow = !this.btnShow
      this.dialogVisible = false
      this.login.name = ''
      this.login.password = ''
      this.$refs.loginRef.clearValidate()
    },
    apply () {
      http.post('/api/login/enter', this.login).then(res => {
        console.log(res.data)
        if (res.data.status === 1) {
          window.localStorage.setItem('token', res.data.msg)
          Message.success('登录成功')
          this.$router.push('/home')
        } else if (res.data.status === 0) {
          Message.error('登录失败，账号或密码错误')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
    #box{
        width: 100%;
        height: 100vh;
        position: relative;
    }
    .enter,.login{
        position: absolute;
        top:30%;
        right: 15%;
        height: 18.75rem;
        width: 28.125rem;
        border-radius: 1.25rem;
        backdrop-filter: blur(.3125rem);
        animation: enter 1s;
        overflow: hidden;
    }

    .login{
        position: absolute;
        top:30%;
        left: 15%;
        animation:login 1s ease-in;
    }

    @keyframes enter {
      0%{
        opacity: 0;
        transform: translate(-35rem);
      }
      100%{
        opacity: 1;
        transform: translate(0);
      }
    }

    @keyframes login {
      0%{
        opacity: 1;
        transform: translate(35rem);
      }
      50%{
        opacity: 0;
      }
      100%{
        opacity: 1;
        transform: translate(0);
      }
    }
    .el-form{
            padding:4.375rem 1.25rem;

            .btn,.btns{
                display: flex;
                justify-content: space-around;
            }
            .el-form-item{
                color: black;
            }
        }

    .background,.Background{
        background-image:url('@/assets/enter.jpg');
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .Background{
        background-image:url('@/assets/login.jpg');
    }
</style>
